<!DOCTYPE html>
<html lang="en">
<head>
<title>How do I add images to a wiki page?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How do I add images to a wiki page?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_73F384C8-0AB2-4E78-92AE-52E254120958" class="text-block-content">
    <p>Before you add an image, make sure that it is the correct size and shape for your web page, and that the file size is optimized for the web. If you put an image with a very large file size into a wiki page, it will take a long time for users to download it. Many image editing programs will allow you to compress images for the web.</p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Go to Wiki.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/003/240/417/original/8aaf79f3-8224-4d34-b74a-3072b44d9903.png" alt="Image of the wiki button" height="124" width="198">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_D3388E36-EC00-4361-A1A8-58BD099FAEB9" class="text-block-content">
    <p>Select the <strong>Wiki</strong> tool from the Tool Menu of your site.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Click Edit.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/001/281/167/original/8d0de84e-af99-44af-8019-d78aa92f4103.png" alt="Image of the edit button" height="45" width="525">
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="select-the-image-icon-in-the-editor-toolbar">
    <h2 class="step-title screensteps-heading">Select the Image icon in the editor toolbar.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/003/240/420/original/399cd77a-89d0-4a9d-8b6b-f9c5d1ee4c3c.png" alt="Image of the add image button" height="112" width="365">
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="select-the-image-from-resources">
    <h2 class="step-title screensteps-heading">Select the image from Resources.</h2>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/003/246/408/original/01fcd30a-9452-4969-a788-f32e755b567e.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/003/246/408/medium/01fcd30a-9452-4969-a788-f32e755b567e.png" alt="Image of the select image from resources" height="280" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_401FA5D4-4A98-481E-B4E1-B994AD1722A2" class="text-block-content">
    <p>Click the <strong>Select</strong> link for the image file if it is already in Resources. </p>
  </div>
</div>
 
        <div class="step screensteps-section screensteps-depth-2" id="or-upload-the-file">
    <h3 class="step-title screensteps-heading">Or, upload the file.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/376/095/original/303e7ffb-046c-4fb8-a130-5cae8de52fec.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/376/095/medium/303e7ffb-046c-4fb8-a130-5cae8de52fec.png" alt="Image of the upload files button" height="380" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_20315060-DDDD-481F-B2FC-9BA5696A85EB" class="text-block-content">
    <p>If the image file is not already in Resources, click <strong>Add &gt; Upload Files</strong> in the Add drop-down menu to drag and drop or browse for and select the file you want.</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2">
    <h3 class="step-title screensteps-heading">Click Continue.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/003/246/412/original/2331005e-6b2b-4b22-9fd8-a99d6a7318aa.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/003/246/412/medium/2331005e-6b2b-4b22-9fd8-a99d6a7318aa.png" alt="Image of the add attachment and continue buttons" height="177" width="855">
      </a>
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_6280F5B3-7F99-453A-923C-852BD1E5FDCA" class="text-block-content">
    <p>Once you have selected the image file, click the <strong>Continue</strong> button.</p>
  </div>
</div>
 
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Preview content. (Optional)</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/003/246/416/original/a053f732-86d8-4d4a-aaf2-7b1121eaeead.png" alt="image of the preview button" height="576" width="653">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_39C1D755-5407-4875-BDE1-7513816A4577" class="text-block-content">
    <p>If you would like to preview your content before saving, click the <strong>Preview</strong> tab at the top of the editing area.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1">
    <h2 class="step-title screensteps-heading">Click Save.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/003/246/410/original/b2f97686-f5a3-41de-bb0b-25a3ecc8e7fd.png" alt="Image of the save button" height="56" width="169">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_A7E75719-258E-4C9C-9AF9-6BFDE4F3C2BE" class="text-block-content">
    <p>Once you have finishing editing the page, click <strong>Save</strong>.</p>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
